<template>
	<view>
		<video :src="mv_info.url" class="video" id="myVideo" autoplay="true" enable-danmu danmu-btn controls>
			<cover-view class="nav-back">
				<u-navbar :autoBack="true" bgColor="#000000" :fixed="false" leftIconColor="#fff">
				</u-navbar>
			</cover-view>
		</video>
		<!-- 弹幕 -->
		<view class="barrage uni-common-mt">
			<u--input class="uni-input" placeholder="发个弹幕聊聊..." v-model="danmuValue">
			</u--input>
			<u-button text="发送" class="barrage-bottom"
				color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" @click="sendDanmu">
			</u-button>
		</view>

		<!--  头像 -->
		<view class="nav-bar">
			<view class="nav-bar-content" v-for="(item,index) in user" :key="index">
				<u-avatar :src="item.img1v1Url"></u-avatar>
				<view class="nav-bar-content-title">
					<u--text :text="item.name" size="30rpx"></u--text>
					<text class="fans">{{fans.fansCnt | count}}粉丝</text>
				</view>
			</view>
			<view class="nav-bar-follow">
				<u-button shape="circle" text="关注" icon="plus" size="mini"></u-button>
			</view>
		</view>

		<!-- 歌名和发表日期 -->
		<view class="dates">
			<view class="mu_name">
				<!-- <text class="dates-title">{{mvdata.name}}</text>
				<u-icon name="arrow-down"></u-icon> -->
				<u-collapse accordion :border="false" class="dates-title">
					<u-collapse-item :title="mvdata.name" :border="false"
						icon="https://via.placeholder.com/80x80.png/d7d7d6">
						<text class="u-collapse-content">{{mvdata.desc}}</text>
					</u-collapse-item>
				</u-collapse>
			</view>
			<text class="song">♪ {{mvdata.name}}-{{mvdata.artistName}}</text>
			<text class="dates-count">{{mvdata.playCount | count}}次观看 {{mvdata.publishTime}}</text>
		</view>
		<!-- 四个功能口 -->
		<view class="entrance">
			<!-- 收藏 -->
			<view class="entrance-collect flex-c-c">
				<u-icon name="heart" size="35px"></u-icon>
				<u--text text="收藏" align="center"></u--text>
			</view>

			<!-- 分享 -->
			<view class="entrance-share flex-c-c">
				<u-icon name="twitter" size="40px"></u-icon>
				<u--text :text="infos.shareCount | count" align="center"></u--text>
			</view>

			<!-- 评论 -->
			<view class="entrance-comment flex-c-c" @click="show = true">
				<u-icon name="chat" size="40px"></u-icon>
				<u--text :text="infos.commentCount" align="center"></u--text>
			</view>
			<!-- 点赞 -->
			<view class="entrance-thumbs-up flex-c-c">
				<u-icon name="thumb-up" size="38px"></u-icon>
				<u--text :text="infos.likedCount | count" align="center"></u--text>
			</view>
		</view>

		<!-- 相似MV -->
		<view class="alike">
			<view class="alike-content" v-for="(item,index) in alike" :key="item.id" @click="AlikePlay(item.id)">
				<view class="alike-content-cover">
					<u--image mode="widthFix" :src="item.cover" radius="15rpx" width="160px" height="100px"></u--image>
				</view>
				<view class="alike-content-info">
					<text class="alike-content-info-title">{{item.name}}</text>
					<view class="alike-content-info-msg">
						<text>{{item.artistName }}</text>
						<text>{{item.playCount | count}}播放</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 评论弹出框 -->
		<view class="popup">
			<u-popup mode="bottom" :show="show" @close="close">
				<scroll-view scrollY class="scroll" @scrolltolower="reachBottom">
					<view class="popup-warp">
						<!--tab-->
						<view class="popup-comment">
							<text>评论区</text>
							<view class="content-comment-tabs">
								<u-tabs :list="tabList" @change="change"></u-tabs>
							</view>
						</view>

						<!-- 展示评论内容 -->
						<view class="newest" v-if="current==0">
							<new-comments :newComments="newComments"></new-comments>
						</view>
						<view class="newest" v-if="current==1">
							<hot-comments :hotComments="hotComments"></hot-comments>
						</view>

					</view>
				</scroll-view>
			</u-popup>
		</view>

	</view>

</template>

<script>
	import HotComments from '../listcomments/components/HotComments.vue'
	import NewComments from '../listcomments/components/NewComments.vue'

	import {
		getMv,
		getMvDetail,
		getResembleMv,
		getArtistFans,
		getMvInfo,
		getMvComment
	} from '@/http/search.js'
	export default {
		components: {
			HotComments,
			NewComments
		},
		data() {
			return {
				mv_id: "",
				mv_info: "",
				danmuValue: '',
				user: [], //用户数据
				alike: [], //相似mv
				artistId: "", //歌手id
				fans: [], //粉丝数量
				infos: [], //分享 评论等数量
				mvdata: [], //mv的详细信息
				show: false,
				tabList: [{
					name: '最新',
				}, {
					name: '最热'
				}], //tab切换
				current: 0, //下标值
				total: "", //总评论数
				hotComments: [], //热门评论
				newComments: [], //最新评论 
			}
		},
		onLoad(o) {
			this.mv_id = o.id
		},
		created() {
			this._getMv()
			this.MvDetail()
			this.ResembleMv()
			this.MvInfo()
			this.MvComment()
		},
		onReady(res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			async _getMv() {
				const {
					data: res
				} = await getMv(this.mv_id)
				this.mv_info = res
			},

			// 获取mv详细数据
			async MvDetail() {
				const {
					data = []
				} = await getMvDetail(this.mv_id);
				this.mvdata = data
				this.user = data.artists
				this.artistId = data.artistId

				// 等mv详细数据获取完再获取id  不然拿不到数据
				this.ArtistFans()
			},


			// 相似MV推荐
			async ResembleMv() {
				const {
					mvs = []
				} = await getResembleMv(this.mv_id);
				this.alike = mvs
			},
			// 获取歌手粉丝数量
			async ArtistFans() {
				const {
					data = []
				} = await getArtistFans(this.artistId)
				this.fans = data
			},
			// 获取 mv 点赞转发评论数数据
			async MvInfo() {
				const data = await getMvInfo(this.mv_id)
				this.infos = data
			},
			// 获取mv评论
			async MvComment() {
				const res = await getMvComment(this.mv_id,30)
				this.total = res.total
				this.hotComments = res.hotComments
				this.newComments = res.comments
			},

			// 相似mv播放 
			AlikePlay(id) {
				uni.redirectTo({
					url: "/view/Mv/Mv?id=" + id
				})
			},

			// 发送弹幕
			sendDanmu() {
				this.videoContext.sendDanmu({
					text: this.danmuValue,
					color: this.getRandomColor()
				});
				this.danmuValue = '';
			},
			//点击选中哪个tab为激活状态
			change(item) {
				this.current = item.index
			},

			// 弹幕颜色
			getRandomColor() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			},
			close() {
				this.show = false
			}

		},
		filters: {
			count(v) {
				return v > 10000 ? (v / 10000).toFixed(1) + '万' : v
			},
			formatStr2(v) {
				return moment(v).format('mm:ss')
			}
		},
	}
</script>

<style lang="scss" scoped>
	* {
		font-family: STXihei;
		background-color: #f6f6f6;
	}

	.video {
		width: 100%;
		height: 45vh;
	}

	.barrage {
		display: flex;

		&-bottom {
			width: 120rpx;
			// height: ;
		}
	}

	.user_info {
		display: flex;
		justify-content: space-between;
		height: 60px;
		border: 1px solid red;

		&-left {
			flex: 9;
			border: 1px solid red;
		}

		&-right {
			flex: 2;
		}
	}

	.nav-bar {
		padding: 30rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&-content {
			display: flex;

			&-title {
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;

				.fans {
					font-size: 15rpx;
					color: #999;
				}
			}
		}

		&-follow {
			display: flex;
		}
	}

	.dates {
		display: flex;
		flex-direction: column;
		// margin: 0rpx 30rpx;

		.mu_name {
			width: 100%;
			margin: 0;
			// display: flex;
			// justify-content: space-between;
		}

		.song {
			margin: 15rpx 30rpx;
			font-size: 30rpx;
			color: #537daf;
			font-weight: bold;
		}

		&-title {
			font-weight: bold;
			// border: 1px solid red;
		}

		&-count {
			font-size: 25rpx;
			color: #ccc;
			// margin-top: 12rpx;
			margin: 0 30rpx;


		}
	}

	.entrance {
		display: flex;
		justify-content: space-between;
	}

	.flex-c-c {
		width: 25%;
		padding: 30rpx 15rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	// 相似mv
	.alike {
		margin: 0rpx 15rpx;

		&-content {
			display: flex;
			margin: 30rpx 15rpx;

			&-info {
				display: flex;
				flex-direction: column;
				margin: 0rpx 15rpx;

				&-title {
					font-size: 40rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				&-msg {
					display: flex;
					flex-direction: column;
					font-size: 28rpx;
					padding-top: 8rpx;
					line-height: 45rpx;
				}
			}
		}
	}

	.popup {
		
		
		.scroll {
			height: 100%;
		}

		&-comment {
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 30rpx;
		}
		.newest {
			padding: 30rpx 30rpx;
		}

		&-warp {
			height: 60vh;
		}

	}
</style>
